<template>
  <div>
    <!--头部-->
    <header class="publicHeader">
      <h1>超市订单管理系统</h1>
      <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> {{nickName}}</span> , 欢迎你！</p>
        <a href="javascript:;" @click="logout">退出</a>
      </div>
    </header>
    <!--时间-->
    <section class="publicTime">
      <span id="time">2015年1月1日 11:11  星期一</span>
      <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian ">
      <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
          <ul class="list">
            <li><a href="jsp/bill.do?method=query">订单管理</a></li>
            <li><a href="#/providerManager">供应商管理</a></li>
            <li><a href="#/userManager">用户管理</a></li>
            <li><a href="#/changePassword">密码修改</a></li>
            <li><a href="javascript:;" @click="logout">退出系统</a></li>
          </ul>
        </nav>
      </div>
      <input type="hidden" id="path" name="path" value="/SMBMS"/>
      <input type="hidden" id="referer" name="referer" value="http://localhost:8080jsp/bill.do?method=query"/>

      <div class="right">
        <div class="location">
          <strong>你现在所在的位置是:</strong>
          <span>供应商管理页面</span>
        </div>
        <div class="search">
          <form method="get" action="jsp/provider.do">
            <input name="method" value="query" type="hidden">
            <span>供应商编码：</span>
            <input name="queryProCode" type="text" value="">

            <span>供应商名称：</span>
            <input name="queryProName" type="text" value="">

            <input value="查 询" type="submit" id="searchbutton">
            <a href="#/providerSave">添加供应商</a>
          </form>
        </div>
        <!--供应商操作表格-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
          <tr class="firstTr">
            <th width="10%">供应商编码</th>
            <th width="20%">供应商名称</th>
            <th width="10%">联系人</th>
            <th width="10%">联系电话</th>
            <th width="10%">传真</th>
            <th width="10%">创建时间</th>
            <th width="30%">操作</th>
          </tr>

          <tr v-for="p in result.list">
            <td>
              <span>{{ p.proCode }}</span>
            </td>
            <td>
              <span>{{ p.proName }}</span>
            </td>
            <td>
              <span>{{ p.proContact }}</span>
            </td>
            <td>
              <span>{{ p.proPhone }}</span>
            </td>
            <td>
              <span>{{ p.proFax }}</span>
            </td>
            <td>
              <span>2013-03-21</span>
            </td>
            <td>
              <span>
                <a class="viewProvider" href="#" @click="showProvider(p.id)">
                  <img src="../assets/images/read.png" alt="查看" title="查看"/>
                </a>
              </span>
              <span>
                <a class="modifyProvider" href="javascript:;" @click="updateProvider(p.id)">
                  <img src="../assets/images/xiugai.png" alt="修改" title="修改"/>
                </a>
              </span>
              <span>
                <a class="deleteProvider" href="javascript:;" @click="removeProvider(p.id)">
                  <img src="../assets/images/schu.png" alt="删除" title="删除"/>
                </a>
              </span>
            </td>
          </tr>
          <tr>
            <th colspan="7">
              <el-pagination
                  layout="prev, pager, next"
                  :total="result.total" :page-size="5" @current-change="loadProviderData">
              </el-pagination>
            </th>
          </tr>
        </table>

      </div>
    </section>

    <!--点击删除按钮后弹出的页面-->
    <div class="zhezhao"></div>
    <div class="remove" id="removeProv">
      <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
          <p>你确定要删除该供应商吗？</p>
          <a href="#" id="yes">确定</a>
          <a href="#" id="no">取消</a>
        </div>
      </div>
    </div>


    <footer class="footer">
      版权归关老师
    </footer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ProviderManager",
  data() {
    return {
      result: {},
      nowPage: 1,
      nickName:window.localStorage.getItem('nickName')
    }
  },
  created() {
    this.loadProviderData(1)
  },
  methods: {
    showProvider(pid) {
      this.$router.push({name: 'providerShow', query: {id: pid}})
    },
    updateProvider(pid) {
      this.$router.push({name: 'providerUpdate', query: {id: pid}})
    },
    loadProviderData(page) {
      let _this = this
      this.nowPage = page
      axios.get('/api/smbms-provider/provider/' + page,{
        headers:{
          token:window.localStorage.getItem('token')
        }
      })
          .then((response) => {
            if (response.status === 403) {
              _this.$router.push('login')
            } else {
              _this.result = response.data.data
            }
          }).catch(() => {
        _this.$router.push('login')
      })
    },
    removeProvider(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('/api/smbms-provider/provider/' + id + '/' + this.nowPage + '/' + this.result.size)
            .then((response) => {
              let _this = this
              _this.result = response.data.data
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    logout(){
      window.localStorage.removeItem('token')
      this.$router.push('login')
    }
  }
}
</script>

<style lang="css">
/*引入外部css文件*/
@import url('../assets/css/style.css');
@import url('../assets/css/public.css');
</style>